<template>
  <div class="cuntercontrolLog tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:242px">
            <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </div>&emsp;&emsp;
      <el-button @click="getQueryBackControlLog()"><i class="iconfont icon-sousuo"></i>查询</el-button>
     
    </div>
    <div class="currency-mode-wrap">
      <yf-tabs type="border-card" @tab-click="toggleTab">
        <yf-tab-pane label="返控操作日志">
          <div class="tablebox" style="height: calc(100% - 35px);">
            <el-table
              :data="tableData"
              border
              height="100%">
              <el-table-column
                prop="cn"
                label="请求编码">
              </el-table-column>
              <el-table-column
                prop="description"
                label="命名描述">
              </el-table-column>
              <el-table-column
                prop="operationUser"
                label="操作用户">
              </el-table-column>
              <el-table-column
                prop="operationTime"
                label="时间">
              </el-table-column>
              <el-table-column
                prop="ip"
                label="IP">
              </el-table-column>
              <el-table-column
                prop="response"
                label="请求应答">
              </el-table-column>
              <el-table-column
                prop="result"
                label="执行结果">
              </el-table-column>
              <el-table-column
                prop="content"
                label="内容">
              </el-table-column>
            </el-table>
          </div>
          <div class="paginationBox">
            <el-pagination
              @size-change="paginationSizeChange"
              @current-change="paginationChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              background
              :small = "true"
              popper-class = "select-common-option"
              :page-sizes = "pageList"
              layout="total,sizes,slot,->,prev, pager, next, jumper"
              :total="totalRecords">
              <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
            </el-pagination>
          </div>
        </yf-tab-pane>
        <yf-tab-pane label="留样信息">
          <div class="tablebox">
            <el-table
              :yfdata="tableData"
              border
              style="width: 100%">
              <el-table-column
                prop="time"
                width="160"
                label="留样时间">
              </el-table-column>
              <el-table-column
                prop="bottle"
                width="160"
                label="留样瓶号">
              </el-table-column>
            </el-table>
          </div>
        </yf-tab-pane>
      </yf-tabs>
    </div>
  </div>
</template>

<script>

  export default {
    name: "cuntercontrolLog",
    data() {
      return {
        dateRange: "",
        currentPage: 1, //分页组件当前页
        pageSize: 10, //分页每页多少条数据
        totalRecords: 0, //总条数
        pageList: [10, 15, 20], //设置每页多少条
        tableData:[],
      };
    },
    computed:{
      totalPageNumber(){//计算总页数
        let number = 0;
        number = Math.ceil(this.total/this.pageSize);
        return number === 0 ? 1 : number;
      },
      stationInfo: {
        get: function() {
          return this.$store.state.stationInfo;
        }
      }
    },
    methods:{
      toggleTab(val){
      },
      //获取返控日志
      getQueryBackControlLog(){
        this.$http.get("/Receiving/queryBackControlLog", {
          params: {
            startTime: this.dateRange[0].format('yyyy-MM-dd'),
            endTime: this.dateRange[1].format('yyyy-MM-dd'),
            mn: this.stationId, //this.stationId
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          }
        }).then(res=>{
          if(res.data.code === 0){
            console.log(res);
            this.tableData = res.data.content.dataList;
            this.totalRecords = res.data.content.totalRecords;
          }
        })
      },
      paginationChange(val) {
        //分页页码改变时执行
        this.currentPage = val;
        this.getQueryBackControlLog();
      },
      paginationSizeChange(val) {
        //分页pageSize改变时执行
        this.pageSize = val;
        this.getQueryBackControlLog();
      },
    },
    mounted(){
      // this.createdChart();
    },
    created() {
      this.$store.commit("setShowlefttree", true);

      //初始化时间
      let startTime = new Date(new Date().setDate(new Date().getDate() - 1));
      let endTime = new Date();
      this.dateRange = [startTime,endTime];
    },
    watch: {
      stationInfo(value) {
        if (value.length > 0) {
          this.stationId = value[0].nodeId;
          this.getQueryBackControlLog();
        }
      }
    }
  };
</script>

<style scoped lang="less">
  .cuntercontrolLog {
   
    .tablebox{
      height: 100%;
    }
  }
</style>
